<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>方法与事件及修饰符</title>
</head>
<body>

<div id="app">
    点击次数：{{ counter }}
    <button type="button" @click="counter++">+1</button>

    <button type="button" @click="handleAdd()">+1</button>

    <button type="button" @click="handleAdd(10)">+10</button>

    <hr>

    <p>修饰符</p>
    <a @click.stop="handle">阻止单击事件冒泡</a>
    <form @submit.prevent="handle">提交事件不再重载页面</form>
    <a @click.stop.prevent="handle">修饰符可以串联</a>
    <form @submit.prevent>只有修饰符</form>
    <div @click.capture="handle">添加事件侦听器时使用事件捕获模式</div>
    <div @click.self="handle">只当事件在该元素本身(而不是子元素)触发时触发回调</div>
    <div @click.once="handle">只触发一次，组件同样适用</div>

    <p>在表单元素上监听键盘事件时，还可以使用按键修饰符，然后当你按下具体某个键时才调用相应的方法</p>

    <!--只有在keyCode是13时才会调用vm.submit()方法-->
    <input @keyup.13="submit">
    <!--还可以自己配置具体的按键-->
    <!-- Vue.config.keyCode.f1=112;  //全局定义完后，就可以使用@keyup.f1了 -->

    <!-- Shift + S -->
    <input @keyup.shift.83="handleSave">

    <!-- Ctrl + Click -->
    <div @click.ctrl="doSomething">Do something</div>

</div>


<div id="app1">
    <a href="http://www.baidu.com" @click="handleClick('禁止打开',$event)">打开连接</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">

    /**
     * 这样通过html就可以知道调用哪个方法，将逻辑与DOM进行解耦，便于维护，更重要的是当ViewModel销毁时，所有的事件处理器都会自动删除，无需自己清理。
     *
     * **/

    var app = new Vue({
        el: "#app",
        data: {
            counter: 0,
        },
        methods: {
            handleAdd: function (count) {
                count = count || 1;
                //this指向当前Vue实例app
                this.counter += count;
            }
        }
    });

    /**
     * Vue提供了一个特殊的变量$event，用于访问原生的DOM事件
     * */
    var app1 = new Vue({
        el:"#app1",
        methods:{
            handleClick:function (message, event) {
                event.preventDefault();
                window.alert(message);
            }
        }
    });

    /**
     * event.preventDefault()也可以使用Vue事件的修饰符来实现，在@绑定的事件后加上一个小圆点"."，再跟一个后缀使用修饰符。
     * 如以下修饰符：.stop、.prevent、.capture、.self、.once等
     *
     *
     * 除了具体的某个keyCode外，Vue还提供了一些快捷名称，以下是全部的别名：（注意各个方法前面的.号）
     * .enter
     * .tab
     * .delete(捕获"删除"和"退格"键)
     * .esc
     * .space
     * .up
     * .down
     * .left
     * .right
     * 上述按键修饰符也可组合使用，或者和鼠标一起配合使用：
     * .ctrl
     * .alt
     * .shift
     * .meta(Mac下是Command键，Windows下是窗口键)
     *
     * */
</script>
</body>
</html>